var renderer;
function initThree() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // renderer.setSize(width, height);
  renderer.setClearColor(0x000000, 1.0);
}

var camera;
var cameraParam;
var scene;
function initCamera() {
  camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    0.1,
    10000,
  );
  camera.position.x = cameraParam.x;
  camera.position.y = cameraParam.y;
  camera.position.z = cameraParam.z;
  camera.up.x = cameraParam.up.x;
  camera.up.y = cameraParam.up.y;
  camera.up.z = cameraParam.up.z;
  camera.lookAt({
    x: 0,
    y: 0,
    z: 0,
  });
  scene = new THREE.Scene();
  scene.add(camera);

  var light = new THREE.DirectionalLight(0xffffff);
  light.position.set(200, 200, 1000).normalize();

  camera.add(light);
  camera.add(light.target);
}

var light;
function initLight() {
  light = new THREE.AmbientLight(0x000000);
}

var cube;
var texture;
var objMesh;
function initObject() {
  // var geometry = new THREE.CubeGeometry(100, 100, 100);
  // var v1 = new THREE.Vector3(-100, 0, 0);
  // var v2 = new THREE.Vector3(100, 0, 0);
  // var v3 = new THREE.Vector3(0, 100, 0);
  // var meterial = new THREE.MeshBasicMaterial({
  //   vertexColors: THREE.VertexColors,
  //   wireframe: false,
  // });
  
  // geometry.vertices.push(v1);
  // geometry.vertices.push(v2);
  // geometry.vertices.push(v3);

  // var c1 = new THREE.Color(0xff0000);
  // var c2 = new THREE.Color(0x00ff00);
  // var c3 = new THREE.Color(0x0000ff);
  // var c4 = new THREE.Color(0x0080f0);
  // var c5 = new THREE.Color(0xf080f0);
  // objMesh = new THREE.Mesh(geometry, meterial);
  // var face = new THREE.Face3(2, 0, 1);
  // geometry.faces.forEach((f) => {
  //   f.vertexColors[0] = c1;
  //   f.vertexColors[1] = c2;
  //   f.vertexColors[2] = c3;
  // });

  // geometry.faces.push(face);
  // 立方体
  var geometry = new THREE.BoxGeometry( 30, 30, 30 );
                
  for ( var i = 0; i < geometry.faces.length; i += 2 ) {

      var hex = Math.random() * 0xffffff;
      geometry.faces[ i ].color.setHex( hex );
      geometry.faces[ i + 1 ].color.setHex( hex );

  }
  
  var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
  objMesh = new THREE.Mesh( geometry,material);
  objMesh.position = new THREE.Vector3(0,0,0);
  scene.add(objMesh);

  console.log("geometry", geometry);
  scene.add(objMesh);
}

function initTexture() {}

var gui;
function createUI() {
  var lightObj = function () {
    this.x = 0;
    this.y = 0;
    this.z = 0;
    this.decay = 1;
  };

  var cameraObj = function () {
    this.up = {};
    this.x = 0;
    this.y = 0;
    this.z = 0.2;
    this.up.x = 0;
    this.up.y = 1;
    this.up.z = 0;
  };

  var gui = new DAT.GUI();
  cameraParam = new cameraObj();
  gui.add(cameraParam, "x", -2000, 2000).name("相机X的位置");
  gui.add(cameraParam, "y", -2000, 2000).name("相机Y的位置");
  gui.add(cameraParam, "z", -2000, 2000).name("相机Z的位置");
  gui.add(cameraParam.up, "x", -1, 1).name("相机up.x的位置");
  gui.add(cameraParam.up, "y", -1, 1).name("相机up.y的位置");
  gui.add(cameraParam.up, "z", -1, 1).name("相机up.z的位置");

  lightParam = new lightObj();
  gui.add(lightParam, "x", -2000, 2000).name("点光源X的位置");
  gui.add(lightParam, "y", -2000, 2000).name("点光源Y的位置");
  gui.add(lightParam, "z", -2000, 2000).name("点光源Z的位置");
  gui.add(lightParam, "decay", 0, 1).name("衰减");
}

function change() {
  if (texture != null) {
    texture.offset.x = textureParam.offsetX;
    texture.offset.y = textureParam.offsetY;
    texture.repeat.x = texture.repeat.y = textureParam.repeat;
    if (textureParam.wrap == 1) {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    } else if (textureParam.wrap == 2) {
      texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
    } else if (textureParam.wrap == 3) {
      texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
    }
    texture.needsUpdate = true;
  }

  light.position.set(lightParam.x, lightParam.y, lightParam.z);
  light.decay = lightParam.decay;

  camera.position.x = cameraParam.x;
  camera.position.y = cameraParam.y;
  camera.position.z = cameraParam.z;
  camera.up.x = cameraParam.up.x;
  camera.up.y = cameraParam.up.y;
  camera.up.z = cameraParam.up.z;
  camera.up.set(cameraParam.up.x, cameraParam.up.y, cameraParam.up.z);
  camera.updateProjectionMatrix();
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

var mesh;
function initModel() {
  var loader = new THREE.VTKLoader();
  console.log("loader", loader);
  loader.load("/model/bunny.vtk", function (geometry) {
    geometry.computeVertexNormals();
    var material = new THREE.MeshLambertMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
    });
    
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.setY(-0.09);
    mesh.rotateY = Math.PI;
    scene.add(mesh);
    mesh.rotateX = 2;
  });
}

var stats;
function initStatus() {
  var container = document.createElement("div");
  document.body.appendChild(container);
  container.appendChild(renderer.domElement);
  stats = new Stats();
  stats.domElement.style.position = "absolute";
  stats.domElement.style.top = "0px";
  container.appendChild(stats.domElement);
  container.appendChild(renderer.domElement);
}

var ang = 0;
function animation() {
  change();
  if (mesh) {
    if (ang == 0) {
      console.log("mesh", mesh);
    }
    ang = (ang + 0.1) % (2 * Math.PI);
    mesh.rotation.y += 0.05;
  }
  if (objMesh) {
    if (ang == 0) {
      console.log("mesh", mesh);
    }
    ang = (ang + 0.1) % (2 * Math.PI);
    objMesh.rotateX += 0.1;
  }
  stats.update();
  renderer.clear();
  renderer.render(scene, camera);
  requestAnimationFrame(animation);
}

function threeStart() {
  createUI();
  initTexture();
  initLight();
  initCamera();
  initThree();
  initObject();
  initStatus();
  initModel();
  animation();
  window.addEventListener("resize", onWindowResize, false);
}
